<template>
  <div class="VonTable">
    <el-table class="VonTableContent" ref="VonTable" border :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle" @cell-click="clickTableContent"
              :cell-style="cellStyle" :border="false" :data="computedTableData" :height="height" @selection-change="selectionChange">
      <el-table-column type="expand"  v-if="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item :label="getEntryLabel(item)" v-for="item in props.row.entry">
              <span>{{item.wayValue}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column v-if="selection" type="selection" width="55">
      </el-table-column>
      <slot name="num"></slot>
      <el-table-column
              :align="item.align"
              v-for="item in column"
              :prop="item.prop"
              :label="item.label"
              :show-overflow-tooltip="true"
              :width="item.width">
      </el-table-column>
      <el-table-column
              v-if="isHasPoint"
              label="通道"
              align="center"
              prop="ellipsis"
              :show-overflow-tooltip="true"
              width="180">
        <template  slot-scope="scope">
          <el-popover
                  placement="right"
                  width="400"
                  trigger="click">
            <div>
              <el-tag>通道A：{{scope.row && scope.row.pointA || '--'}}</el-tag>
              <el-tag>通道B：{{scope.row && scope.row.pointB || '--'}}</el-tag>
              <el-tag>B1：{{scope.row && scope.row.pointB1 || '--'}}</el-tag>
              <el-tag>B2：{{scope.row && scope.row.pointB2 || '--'}}</el-tag>
              <el-tag>B3：{{scope.row && scope.row.pointB3 || '--'}}</el-tag>
              <el-tag>B4：{{scope.row && scope.row.pointB4 || '--'}}</el-tag>
              <el-tag>B5：{{scope.row && scope.row.pointB5 || '--'}}</el-tag>
              <el-tag>B6：{{scope.row && scope.row.pointB6 || '--'}}</el-tag>
              <el-tag>B7：{{scope.row && scope.row.pointB7 || '--'}}</el-tag>
              <el-tag>B8：{{scope.row && scope.row.pointB8 || '--'}}</el-tag>
              <el-tag>B9：{{scope.row && scope.row.pointB9 || '--'}}</el-tag>
              <el-tag>B10：{{scope.row && scope.row.pointB10 || '--'}}</el-tag>
              <el-tag>B11：{{scope.row && scope.row.pointB11 || '--'}}</el-tag>
              <el-tag>B12：{{scope.row && scope.row.pointB12 || '--'}}</el-tag>
              <el-tag>B13：{{scope.row && scope.row.pointB13 || '--'}}</el-tag>
              <el-tag>B14：{{scope.row && scope.row.pointB14 || '--'}}</el-tag>
              <el-tag>B15：{{scope.row && scope.row.pointB15 || '--'}}</el-tag>
              <el-tag>B16：{{scope.row && scope.row.pointB16 || '--'}}</el-tag>
            </div>
            <span  slot="reference" style="cursor: pointer">
                <a href="#" style="color:#9ebadc">详情</a>
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <slot name="passed"></slot>
      <slot name="operation"></slot>
    </el-table>
    <el-row class="align-right-pagination" v-show="showPagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="currentPage" :page-sizes="limits" :page-size="limit"
                     layout="total,prev, pager, next" :total="total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
  import {getTesterResultDetails} from '../../api/workStation/bdu'
  export default {
    name: "VonTable",
    data() {
      return {
        headerRowStyle: {
          background: '#302F43'
        },
        innerTableData:[],
        currentPage: 1,
        limits: [10, 20, 30, 40],
        limit: 20,
      }
    },
    props: {
      isHasPoint:{
        type: Boolean,
        default: false,
      },
      CURRENT_TESTER_RESULT:{
        type: Object,
      },
      CurrentTab:{
        type:String,
        default:''
      },
      testerTab:{
        type:Array
      },
      expand: {
        type: Boolean,
        default: false,
      },
      showPagination: {
        type: Boolean,
        default: false,
      },
      selection: {
        type: Boolean,
        default: false
      },
      total: {
        type: Number,
        default: 0,
      },
      height: {
        type: String,
        default: "400px",
      },
      //这块设计成 如果外面传进来优先用传进来的,没有传用内部的
      tableData: {
        type: Array,
        default () {
          return []
        }
      },
      column: {
        type: Array,
        default () {
          return [{
            align: 'center',
            label: '序号',
            prop: 'index',
          },
            {
              align: 'center',
              label: '职位',
              prop: 'position',
            },
            {
              align: 'center',
              label: '姓名',
              prop: 'name',
            },
            {
              align: 'center',
              label: '工号',
              prop: 'number',
            },
          ]
        }
      },
    },
    computed: {
      computedTableData(){
        if(this.CurrentTab && this.innerTableData && this.innerTableData.length > 0){
          return [...this.innerTableData];
        }else{
          return  [...this.tableData];
        }
      },
    },
    methods: {
      selectionChange(list){
        this.$emit('selectionChange',list)
      },
      clickTableContent(row, column, cell, event){
        if(column.property === 'tmpBarCode'){
          this.$emit('getDrawerData',true,row.id);
        }
      },
      cellStyle(row) {
        if(row.column.fixed){
          return {
            background: 'rgba(48, 47, 67, 1)!important',
            color: 'white',
          }
        }else if(row.column.property === 'tmpBarCode'){
          return {
            background: 'rgba(143, 163, 204, .2)!important',
            color: '#3c92ff',
          }
        }else{
          return {
            background: 'rgba(143, 163, 204, .2)!important',
            color: 'white',
          }
        }
      },
      headerCellStyle(roe) {
        if(roe.column.fixed){
          return {
            background: 'rgba(48, 47, 67, 1)!important',
            color: 'white',
          }
        }else{
          return {
            background: 'rgba(143, 163, 204, .2)!important',
            color: 'white',
          }
        }
      },
      getEntryLabel(item){
        return item.wayType + item.index + '   :'
      },
      handleSizeChange(limit) {
        this.pagination.limit = limit;
        this.$emit("handleSizeChange", limit);
      },
      handleCurrentChange(page) {
        this.$emit("handleCurrentChange", page);
      },
      getInnerTableData(){
        let TestingResultId = '';
        if(this.CurrentTab === 'NY' || this.CurrentTab === 'JY'){
          TestingResultId = this.CURRENT_TESTER_RESULT.id1;
        }else{
          TestingResultId = this.CURRENT_TESTER_RESULT.id2;
        }
        let params_detail = {
          TestingResultId,
          StepType:this.CurrentTab
        };
        getTesterResultDetails(params_detail).then(res => {
          if(res.status == 200){
            let list = res.data;
            list.forEach(item=>{
              item.ellipsis = '...';
              if(item.isResultPass){
                item.isResultPass = 'PASS'
              }else {
                item.isResultPass = 'STOP'
              }
            });
            this.innerTableData = list || [];
          }
        })
      }
      // search(page){
      //   let apiMethods;
      //   apiMethods(params).then(res => {
      //     if(res && res.status == 'SUCCESS' && res.body){
      //       this.tableData = res.body.results || []
      //       this.pagination.total = res.body.totalCount || 0
      //     }
      //   })
      // }
    },
    created(){
      if(!!this.CurrentTab){
        this.getInnerTableData();
      }
    },
    watch: {
      CurrentTab: {
        handler: function (newVal, oldVal) {
          if (newVal !== oldVal && newVal) {
            this.getInnerTableData();
          }
        },
        immediate:true
      }
    }
  }
</script>

<style scoped lang="scss">
  .VonTable {
    width: 100%;
    margin: 10px 0;

    .VonTableContent{
      height: 90%;
    }
  }
</style>
